<script setup>
import {ref, watch, nextTick, onBeforeUnmount, defineExpose, provide} from 'vue'
import ChatInput from "@/views/chat/ChatInput.vue";
import ChatBox from './chatBox/Index.vue'

const props = defineProps({
    messages: {
        type: Array,
        required: true
    },
    roleConfig: {
        type: Array,
        required: false,
        default: () => {
            return [
                {
                    name: 'User',
                    role: 'user',
                    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'
                },
                {
                    name: 'Assistant',
                    role: 'assistant',
                    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
                },
                {
                    name: 'System',
                    role: 'system',
                    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
                }
            ]
        }
    },
    processConfig: {
        type: Object,
        default: () => {
            return {
                processTitle: '智能体',
                processType: {
                    logger: '日志',
                    nodeInput: '智能体入参',
                    nodeOutput: '智能体输出'
                }
            }
        }
    },
    align: {
        type: String,
        default: 'leftright',
        validator(value, props) {
            return ['left', 'leftright', 'right'].includes(value)
        }
    },
    inputBoxStyle: {
        type: Object,
        required: false,
        default: () => {
        }
    },
    chatBoxStyle: {
        type: Object,
        required: false,
        default: () => {
        }
    },
})
const emits = defineEmits(["messageSend", "update:messages"])

//#region 变量定义
const userInput = ref('')
const messageBottom = ref(null)
//#endregion

//#region 侦听

const watchHandler = watch(() => props.messages.length, () => {
    // 消息框滚动到最下面
    if (messageBottom) {
        nextTick(() => {
            scrollToBottom()
        })
    }
})

//#endregion

//#region 方法定义
const scrollToBottom = () => {
    messageBottom.value.scrollIntoView({behavior: 'smooth'})
}
/**
 * 选择建议，把建议发送出去
 * @param suggest
 */
const doSuggest = (suggest) => {
    onMessageSend(suggest)
}

/**
 * 用户发送消息
 * @param message
 */
const onMessageSend = (message) => {
    console.log('onMessageSend', message)
    emits('messageSend', message)
    userInput.value = ''
}

const doDeleteMessage = (messageId) => {
    let newMessages = props.messages.filter(message => message.id !== messageId)
    emits('update:messages', newMessages)
}
//#endregion


defineExpose({
    scrollToBottom: scrollToBottom
})

// 提供过程信息的注入，包括信息类型等配置
provide('processConfig', props.processConfig)


//#region 生命周期
onBeforeUnmount(() => {
    watchHandler && watchHandler()
})
//#endregion
</script>

<template>
    <div class="chat">
        <div class="chat-box-container">
            <template v-for="(msg,i) in messages" :key="msg.id">
                <chat-box
                    :style="chatBoxStyle"
                    :id="msg.id"
                    :create-at="msg.createAt"
                    :parent-id="msg.parentId"
                    :status="msg.status"
                    :name="msg.name"
                    :role="msg.role"
                    :role-config="roleConfig"
                    :content="msg.content"
                    :content-type="msg.contentType||'text'"
                    :process="msg.process"
                    :suggest="msg.suggest"
                    :align="align"
                    @do-suggest="doSuggest"
                    @delete="doDeleteMessage"
                >
                    <template v-slot:chatBoxProcess>
                        <slot name="chatBoxProcess" :process="msg.process"></slot>
                    </template>
                    <template v-slot:chatBoxSuggest>
                        <slot name="chatBoxSuggest" :suggest="msg.suggest"></slot>
                    </template>
                    <template v-if="$slots.loading" v-slot:loading>
                        <slot name="loading"></slot>
                    </template>
                </chat-box>
            </template>
            <div ref="messageBottom" class="chat-box-container-scrollBottom"></div>
        </div>
        <div class="chat-input" :style="inputBoxStyle">
            <slot name="chatInput">
                <chat-input v-model="userInput" @send="onMessageSend">
                    <template v-slot:submit>
                        <slot name="chatInputSubmit"></slot>
                    </template>
                </chat-input>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
.chat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(227, 227, 227, 0.54);
    padding: 10px 14px;
    font-family: "Microsoft YaHei", serif;

    &-box-container {
        flex: 1;
        width: 100%;
        min-height: 100px;
        //display: flex;
        //flex-direction: column;
        //justify-content: center;
        //align-items: center;
        overflow-y: auto;

        &--scrollBottom {
            width: 0;
            height: 0;
            border: none;
        }
    }

    &-input {
        min-height: 80px;
        max-height: 300px;
        width: 100%;
        padding: 15px;
    }
}
</style>